<template>
	<view>
		<view class="c-box" id="productInquiry">
		    <view class="popup" v-show="userFlag == 1">
		        <view class="frame">
		            <view class="title">
		                <view class="span">询价表单</view>
		            </view>
		            <view class="content">
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">手机号</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input type="number" v-model="currentUser.phone" placeholder="请填写手机号码"/>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red;">*</view>
		                        <view class="text">验证码</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input style="width: 70%;" type="number" v-model="currentUser.verificationCode"  placeholder="请填写验证码"/>
		                        <view class="inline-a" href="javascript:void(0);" @click="getCheckCode">{{sendMsg}}</view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">公司</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input type="text" v-model="currentUser.company" placeholder="请填写公司名称"/>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">姓名</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input type="text" v-model="currentUser.nickName" placeholder="请填写姓名"/>
		                    </view>
		                </view>
		               <view class="inline" style="align-items: baseline;">
		                   <view class="item1">
		                       <view style="color: red">*</view>
		                       <view class="text">职位</view>
		                       <view>:</view>
		                   </view>
		                   <view class="item2">
		                       <radio-group name="choosePosition" @change="choosePosition" style="width: 100%;justify-content: flex-start;">
		               			<view style="display: flex;    font-size: 27rpx;">
		               			   <label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "销售" :checked="'销售' == currentUser.position"/>销售
		               				</label>
		               				<label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "技术"  :checked="'技术' == currentUser.position"/>技术
		               				</label>
		               				<label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "采购"  :checked="'采购' == currentUser.position"/>采购
		               				</label>
		               			</view>
		               			<view style="display: flex;    font-size: 27rpx;">
		               				<label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "厂长"  :checked="'厂长' == currentUser.position"/>厂长
		               				</label>
		               				<label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "总经理"  :checked="'总经理' == currentUser.position"/>总经理
		               				</label>	
		               				<label style="display: flex;align-items: center;width: 32.5%">
		               					<radio value= "其他"  :checked="'其他' == currentUser.position"/>其他
		               				</label>
		               			</view>
		                       </radio-group>
		                   </view>
		               </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">询价产品</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="nocProduct.tradeName == '' ? '询价产品' : nocProduct.tradeName"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">备注</view>
		                        <view>:</view>
		                    </view>
		                </view>
		                <textarea class="remarks" v-model="nocProduct.remarks" placeholder="请输入备注"></textarea>
		                <view class="btn">
		                    <view class="btn-a" href="javascript:void(0);" @click="goBack">取消</view>
		                    <view class="btn-a" href="javascript:void(0);" @click="submitInquiryOne">提交</view>
		                </view>
		            </view>
		        </view>
		    </view>
 		    <view class="popup" v-show="userFlag == 2">
		        <view class="frame">
		            <view class="title">
		                <view class="span">询价表单</view>
		            </view>
		            <view class="content">
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">公司</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input type="text" v-model="currentUser.company" placeholder="请填写公司名称"/>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">姓名</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <input type="text" v-model="currentUser.nickName" placeholder="请填写姓名"/>
		                    </view>
		                </view>
		                <view class="inline" style="align-items: baseline;">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">职位</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <radio-group name="choosePosition" @change="choosePosition" style="width: 100%;justify-content: flex-start;">
									<view style="display: flex;    font-size: 27rpx;">
									   <label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "销售" :checked="'销售' == currentUser.position" />销售
										</label>
										<label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "技术" :checked="'技术' == currentUser.position" />技术
										</label>
										<label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "采购" :checked="'采购' == currentUser.position" />采购
										</label>
									</view>
									<view style="display: flex;    font-size: 27rpx;">
										<label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "厂长" :checked="'厂长' == currentUser.position" />厂长
										</label>
										<label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "总经理" :checked="'总经理' == currentUser.position" />总经理
										</label>	
										<label style="display: flex;align-items: center;width: 32.5%">
											<radio value= "其他" :checked="'其他' == currentUser.position" />其他
										</label>
									</view>
		                        </radio-group>
		                    </view>
		                </view>
		         
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">手机号</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="currentUser.phone == '' ? '手机号' : currentUser.phone"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">询价产品</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="nocProduct.tradeName == '' ? '询价产品' : nocProduct.tradeName"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">备注</view>
		                        <view>:</view>
		                    </view>
		                </view>
		                <textarea class="remarks" v-model="nocProduct.remarks" placeholder="请输入备注"></textarea>
		                <view class="btn">
		                    <view class="btn-a" href="javascript:void(0);" @click="goBack">取消</view>
		                    <view class="btn-a" href="javascript:void(0);" @click="submitInquiryTwo">提交</view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="popup" v-show="userFlag == 3">
		        <view class="frame">
		            <view class="title">
		                <view class="span">询价表单</view>
		            </view>
		            <view class="content">
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">公司</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="currentUser.company == '' ? '公司名称' : currentUser.company"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">姓名</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="currentUser.nickName == '' ? '姓名' : currentUser.nickName"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">手机号</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="currentUser.phone == '' ? '手机号' : currentUser.phone"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">询价产品</view>
		                        <view>:</view>
		                    </view>
		                    <view class="item2">
		                        <view class="info overflow" v-text="nocProduct.tradeName == '' ? '询价产品' : nocProduct.tradeName"></view>
		                    </view>
		                </view>
		                <view class="inline">
		                    <view class="item1">
		                        <view style="color: red">*</view>
		                        <view class="text">备注</view>
		                        <view>:</view>
		                    </view>
		                </view>
		                <textarea class="remarks" v-model="nocProduct.remarks" placeholder="请输入备注"></textarea>
		                <view class="btn">
		                    <view class="btn-a" href="javascript:void(0);" @click="goBack">取消</view>
		                    <view class="btn-a" href="javascript:void(0);" @click="inquiry">提交</view>
		                </view>
		            </view>
		        </view> 
		    </view>
		</view>
	</view>
</template>

<script>
import proInquiryApi from '@/api/productInquiry.js';
import commonApi from '@/utils/commonMethod.js';
export default {
	
	data() {
		return {
		   currentUser: {},
			nocProduct: {},
			userFlag: 2,
			sendMsg: '获取验证码',
			sendFlag: true,
			countdown: 60,
			issue: true,
		}
	},
	async onLoad(options){
		//获取当前用户
		const currentUserValue = await commonApi.currentUserAxios()
		this.currentUser = currentUserValue.data.session_user_h5
		const currentUser = currentUserValue.data.session_user_h5;
		
		
		if(currentUser.phone.indexOf('yk') != -1){
			this.userFlag = 1;
		}else if (!(currentUser.phone && currentUser.userName && currentUser.company && currentUser.position && currentUser.nickName)) {
			this.userFlag = 2;
		}else {
			this.userFlag = 3;
		}
		//----------获取产品并处理---------------
		this.nocProduct.id = parseInt(options.productId)
		await this.getProductById()
		console.log(this.userFlag);
		
	},
	methods: {
		//获取根据id获取产品
		getProductById() {
			proInquiryApi.getProductById(this.nocProduct.id).then(res =>{
				this.nocProduct = res.data.nocProduct
			})
		},
		getCheckCode(e) {
			if (!this.sendFlag) {
				return;
			}
			if(this.currentUser.phone){
				this.currentUser.phone = this.currentUser.phone.trim();
			}
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (!myreg.test(this.currentUser.phone)) {
				
				uni.showModal({
					title: "提示",
					content: "请输入正确的手机号格式",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			slideCheck({
				phone: this.currentUser.phone,
				countdown: () => {
					this.settime()
				},
				success:(res)=>{
					alert(res)
				},
				error:(res)=>{
					alert(res)
				},
			})
		},
		//验证码定时器,60秒后可以再次获取
		settime(e) {
			if (this.countdown == 0) {
				this.sendMsg = "获取验证码";
				this.sendFlag = true;
				this.countdown = 60;
				return;
			} else {
				this.sendMsg = "重新获取" + this.countdown + "s";
				this.sendFlag = false;
				this.countdown--;
			}
			setTimeout(function () {
				this.settime(e)
			}, 1000)
		},
		goBack(){
			
		},
		choosePosition(e){
			this.currentUser.position = e.detail.value
		},
		verifydata(){
			if (!this.currentUser.company || !this.currentUser.company.trim()) {
				
				uni.showModal({
					title: "提示",
					content: "请填写公司名称",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;
			}
			if (!this.currentUser.nickName || !this.currentUser.nickName.trim()) {
				uni.showModal({
					title: "提示",
					content: "请填写姓名",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;
			}
			if (!this.currentUser.position || !this.currentUser.position.trim()) {
				uni.showModal({
					title: "提示",
					content: "请填写职位！",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;
			}
			return true;
		},
		submitInquiryOne(){
			if(this.currentUser.phone){
				this.currentUser.phone = this.currentUser.phone.trim();
			}
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (!myreg.test(this.currentUser.phone)) {
				
				uni.showModal({
					title: "提示",
					content: "请输入正确的手机号格式",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if (!this.currentUser.verificationCode) {
				uni.showModal({
					title: "提示",
					content: "请填写验证码",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			const verifydata = this.verifydata();
			if(!verifydata){
				return;
			}
			if (!this.nocProduct.remarks) {
				uni.showModal({
					title: "提示",
					content: "请填写备注",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			proInquiryApi.bindPhone(this.currentUser.phone,this.currentUser.verificationCode).then(res =>{
				this.submitInquiryTwo()
			})
		},
		submitInquiryTwo(){
			const verifydata = this.verifydata();
			if(!verifydata){
				return;
			}
			if (!this.nocProduct.remarks) {
				uni.showModal({
					title: "提示",
					content: "请填写备注",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			proInquiryApi.updateInquiry(this.currentUser).then(res => {
				if (res.data.code === 0) {
					this.inquiry();
				}else{
					uni.showModal({
						title: "提示",
						content: "完善信息异常",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			})
		},
		//一键询价
		async inquiry(){
			if(!this.issue){
				return;
			}
			this.issue = false;
			if (!this.nocProduct.remarks) {
				uni.showModal({
					title: "提示",
					content: "请填写备注",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			let nocInquiry = {
				productId: this.nocProduct.id,
				userIdSource: this.nocProduct.userId,
				remarks: this.nocProduct.remarks
			};
			
			proInquiryApi.saveInquiry(nocInquiry).then(r =>{
				uni.showModal({
					title: "",
					content: "稍后供应商会通过手机号联系您",
					showCancel:false,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
							uni.redirectTo({
								url:'/pages/product/productDetail/productDetail?productId=' + that.nocProduct.id,
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
			})
			
		}
	}
}
</script>

<style>
	.popup{
		display: flex;
		align-items: center;
		flex-direction: column
	}
	.popup .frame{
		width: 100%;
		height: auto;
		background-color: #029e9d;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.popup .frame .title{
		/* width: 5rem; */
		height: 100rpx;
		line-height: 100rpx;
		background-color: rgb(2, 158, 157);
		display: flex;
		justify-content: center;
	}
	.popup .frame .title .span{
		color: white;
		font-size: 34rpx;
		font-weight: bold;
	}
	.popup .frame .content{
		width:100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.popup .frame .content .btn{
		width: 100%;
		height: 50rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: normal;
		margin: 40rpx 0 20rpx 0;
		display: flex;
		justify-content: space-evenly;
	}
	.popup .frame .content .btn .btn-a{
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #fff;
		background: #029e9d;
		border-radius: 25rpx;
		display: inline-block;
	}
	.popup .frame .content .inline{
		height: 100rpx;
		width: 80%;
		display: flex;
		align-items: center;
		font-size: 16px;
		margin-top: 0.02rem;
	}
	.popup .frame .content .item1{
		width: 30%;
		display: inline-flex;
	}
	.popup .frame .content .item2{
		width: 70%;
		display: inline-flex;
	}
	.popup .frame .content .inline .text{
		color: #029E9D;
		width: 100%;
		height: auto;
		text-align-last: justify;
		text-align: justify;
	}
	.popup .frame .content .inline .info{
		width: 100%;
		height: auto;
		font-size: 26rpx;
		text-align: left;
		margin-left: 40rpx;
	}
	.remarks{
		width: 74%;
		height: 250rpx;
		padding: 20rpx 40rpx;
		background: #f5f5f5;
		line-height: 50rpx;
		resize: none;
		font-size: 26rpx;
	}
	.overflow{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.popup .frame .content .inline input{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #029e9d;
		border-radius: 10rpx;
		margin-left: 30rpx;
		padding-left: 15rpx;
		font-size: 26rpx;
	}
	.popup .frame .content .inline .inline-a{
		width: 30%;
		font-size: 26rpx;
		color: white;
		background: #029e9d;
		border: 1px solid rgb(2, 158, 157);
		border-radius: 10rpx;
		margin-left: 10rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 7rpx;
	}
	textarea{
		border-width: 1px;
		border-style: solid;
		border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
		border-image: initial;
	}
</style>